<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>幸福宝</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.9/css/sm.min.css">
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.9/css/sm-extend.min.css">
		<link rel="stylesheet" href="styles/Comm.css">

	</head>

	<body>
		<!-- 你的html代码 -->
		<div class="page">
			<header class="bar bar-nav">
				<a class="icon icon-left pull-left self-left"></a>
				<h1 class="title">商品分类</h1>
			</header>
			<div class="bar bar-header-secondary self-MallGoodsSort-searchbar">
				<div class="searchbar">
					<a class="searchbar-cancel">取消</a>
					<div class="search-input">
						<label class="icon icon-search" for="search"></label>
						<input type="search" id='search' placeholder='输入关键字...' />
					</div>
				</div>
			</div>
			
			<div class="col-28" style="  float:left;  width:25%;">
						<div class="list-block self-MallGoodsSort-left" style="vertical-align: top;">
							<ul class="self-border-top self-border-right">
								<li class="item-content self-border-bottom self-border-left self-MallGoodsSort-left-current">
									<div class="item-inner">
										<div class="item-title">家用电器</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">水产海鲜</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">音像数码</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">男式内衣</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">女式内衣</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">食品饮料</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">营养保健</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
			
			
			
			<!-- 这里是页面内容区 -->
			<div class="content">
				<!-- 这里是页面内容区 -->
				<div style="float:left; width:100%; height:180px;">
					<div class="col-28" style="  float:left;  width:25%;">
						<div class="list-block self-MallGoodsSort-left" style="vertical-align: top;">
							<ul class="self-border-top self-border-right">
								<li class="item-content self-border-bottom self-border-left self-MallGoodsSort-left-current">
									<div class="item-inner">
										<div class="item-title">家用电器</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">水产海鲜</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">音像数码</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">男式内衣</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">女式内衣</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">食品饮料</div>
									</div>
								</li>
								<li class="item-content  self-border-bottom self-border-left">
									<div class="item-inner">
										<div class="item-title">营养保健</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-68 self-MallGoodsSort-right" style="  float:right; width:75%;">
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
						<div class="row no-gutter">
							<div class="col-33">
								<div class="card demo-card-header-pic">
									<img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="" style="width: 100%;">
									<p>此处是内</p>
								</div>
							</div>
							<div class="col-33">33%</div>
							<div class="col-33">33%</div>
						</div>
					</div>
				</div>
				<!-- 这里是页面内容区 -->
			</div>
		</div>
		<!-- 你的html代码 -->
		<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.9/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.9/js/sm-extend.min.js' charset='utf-8'></script>
		<script>
			//$.init();
			//var mySwiper = new Swiper('.swiper-container', {
			// autoplay: 5000, //可选选项，自动滑动
			// })
		</script>
	</body>

</html>